<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8"/>
    <title>广告商</title>
    <meta name="description" content="overview & stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="static/css/ace.min.css"/>
    <link rel="stylesheet" href="static/css/ace-responsive.min.css"/>
    <link rel="stylesheet" href="static/css/ace-skins.min.css"/>
    <script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
    <!--提示框-->
    <script type="text/javascript" src="static/js/jquery.tips.js"></script>
</head>

<script type="text/javascript">
    $(function () {
        top.hangge();
    });


    //保存
    function save() {
        var name = $("#name").val();
        if (name == "") {
            $("#name").tips({
                side: 3,
                msg: '请输入名称',
                bg: '#AE81FF',
                time: 2
            });
            $("#name").focus();
            return false;
        }
        var shortName = $("#shortName").val();
        if (shortName == "") {
            $("#shortName").tips({
                side: 3,
                msg: '请输入APP标识',
                bg: '#AE81FF',
                time: 2
            });
            $("#shortName").focus();
            return false;
        }
        if ($("#order").val() == "") {
            $("#order").tips({
                side: 3,
                msg: '请输入广告商顺序',
                bg: '#AE81FF',
                time: 2
            });
            $("#order").focus();
            return false;
        }
        if ($("#statusSelect").val() ==""){
            alert("请选择广告商状态");
            return false;
        }

        if ($("#weightSelect").val() ==""){
            alert("请选择广告商权重");
            return false;
        }
        if ($("#prioritySelect").val() ==""){
            alert("请选择广告商优先级");
            return false;
        }
        if($("#startTime").val() != ""){
            if(!isValidTimeFormat($("#startTime").val())){
                alert("开始时间的格式不正确，请按HH:mm:ss的格式进行设置");
                return false;
            }
        }
        if($("#endTime").val() != ""){
            if(!isValidTimeFormat($("#endTime").val())){
                alert("结束时间的格式不正确，请按HH:mm:ss的格式进行设置");
                return false;
            }
        }
        if($("#startTime").val() != "" && $("#endTime").val() != "") {
            if(compareTime($("#startTime").val(),$("#endTime").val()) > 0) {
                alert("开始时间不能大于结束时间");
                return false;
            }
        }

        $.get("pxAdverster/checkShortName",
            {"shortName": shortName},
            function (data) {
                if (data.code == 200) {
                    $("#menuForm").submit();
                    $("#zhongxin").hide();
                    $("#zhongxin2").show();
                } else {
                    $("#shortName").tips({
                        side: 3,
                        msg: data.msg,
                        bg: '#AE81FF',
                        time: 2
                    });
                    $("#shortName").focus();
                    return false;
                }
            });
    }

    function isValidTimeFormat(timeStr) {
        // 正则解释：00-23:00-59:00-59
        const timePattern = /^([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/;
        return timePattern.test(timeStr);
    }

    function timeToMs(timeStr) {
        const [hours, minutes, seconds] = timeStr.split(':').map(Number);
        return hours * 3600000 + minutes * 60000 + seconds * 1000;
    }

    function compareTime(t1, t2) {
        return timeToMs(t1) - timeToMs(t2);
    }
</script>

<body>
<form action="pxAdverster/add" name="menuForm" id="menuForm" method="post" enctype="multipart/form-data">
   <%-- <input type="hidden" name="startTime" id="startTime"  style="width:200px;"/>
    <input type="hidden" name="endTime" id="endTime"  style="width:200px;"/>--%>
    <div id="zhongxin" class="zhongxin-cla">
        <table>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>广告商名称：</span>
                    <input type="text" name="name" id="name" placeholder="广告商名称"/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>APP标识：</span>
                    <input type="text" name="shortName" id="shortName" placeholder="APP标识"/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>广告商顺序：</span>
                    <input type="number" name="order" id="order" placeholder="输入顺序，越小越靠前"/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>广告商状态：</span>
                    <select id="statusSelect" name="status" data-placeholder="请选择停启用状态" style="vertical-align:top;">
                        <option value="">选择停启用状态</option>
                        <option value="0" >停用</option>
                        <option value="1" >启用</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>广告商权重：</span>
                    <select id="weightSelect" name="weight" data-placeholder="请选择权重" style="vertical-align:top;">
                        <option value="">选择权重</option>
                        <c:forEach var="i" begin="1" end="10">
                            <option value="${i}">${i}</option>
                        </c:forEach>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>广告商优先级：</span>
                    <select id="prioritySelect" name="priority" data-placeholder="请选优先级" style="vertical-align:top;">
                        <option value="">请选优先级</option>
                        <c:forEach var="i" begin="1" end="5">
                            <option value="${i}">${i}</option>
                        </c:forEach>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <span>开始时间:</span>
                    <input name="startTime" id="startTime" type="text" style="width:120px;display: table-cell;" placeholder="开始时间" title="开始时间"/>
            </tr>
            <tr>
                <td>
                    <span>结束时间:</span>
                    <input name="endTime" id="endTime" type="text" style="width:120px;display: table-cell;" placeholder="结束时间" title="结束时间"/>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; padding-top: 10px;">
                    <a class="btn btn-mini btn-primary" onclick="save();">保存</a>
                    <a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="zhongxin2" class="center" style="display:none">
        <br/><br/><br/><img src="static/images/jiazai.gif"/><br/>
        <h4 class="lighter block green"></h4>
    </div>
</form>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#startTime').timepicker({
            timeFormat: 'HH:mm:ss',
            interval: 1,
            dynamic: false,
            dropdown: true,
            scrollbar: true
        });
        $('#endTime').timepicker({
            timeFormat: 'HH:mm:ss',
            interval: 1,
            dynamic: false,
            dropdown: true,
            scrollbar: true
        });
    });
</script>
</body>
</html>